{template common/header}
<style type="text/css">
.dt{ border-top: none; }
.fcontainer{ border:0; max-height: 300px; overflow: auto; }
.friend-container{ width: 100%; }
.friend{ float:left; width: 20%; height:130px; text-align: center; }
.friend .favatar {
    position: relative;
}
.friend .favatar .heart-pg {
    width: $config['pgwidth']px;
    height: $config['pgheight']px;
    right: 20px;
    top: 10px;
    position: absolute;
    z-index: 19;
}
.friend .favatar .heart {
    width: $config['pgwidth']px;
    background-image: url($config['emptypic']);
}
.friend .avt img{
    margin: 10px 0;
    border-radius: 45px;
    border: 2px solid #FFF;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    width: 75px;
    height: 75px;
}
</style>
<div class="f_c" style="width: 600px;">
    <h3 class="flb">
        <em id="return_$_GET['handlekey']">$user[username] {lang yyd_friendliness:title_of} $config['friends']</em>
        <span>
            <a href="javascript:;" class="flbc" onclick="hideWindow('$_GET['handlekey']')" title="{lang close}">{lang close}</a>
        </span>
    </h3>
    <div class="c" align='center'>
        <div class="fcontainer">
            <ul class="friend-container">
                <!--{loop $friends $friend}-->
                <li class="friend">
                    <div class="favatar">
                        <div class="heart-pg" title="$levels[$friend['level']]['name']($friend['friendliness'])" style="background: url($levels[$friend['nextlv']]['image'])">
                          <div class="heart" style="height: $friend['progress']px;background-image: url($levels[$friend['level']]['image']);"></div>  
                        </div>
                        <div class="avt">$friend['avatar']</div>
                    </div>
                    <a target="_blank" href="plugin.php?id=yydjourney:index&uid=$friend[uid]">$friend['username']</a>
                </li>
                <!--{/loop}-->
            </ul>
        </div>
    </div>
</div>
{template common/footer}